<template>
	<view class="sort-Header sort-position" v-if="data.banner_data.length != 0">
		<text>横幅图片</text>
		<text>操作</text>
	</view>
	<view style="height: 90rpx;"></view>
	<view class="sort-Header sort-table" v-for="(item,index) in data.banner_data" :key="item._id">
		<image :src="item.banner_cover" mode="aspectFill"></image>
		<text class="sort-but" @click="deleteBanner(item._id,index)">删除</text>
	</view>
	<!-- 没有数据的提示 -->
	<view class="Tips" v-if="data.banner_data.length === 0">还没有横幅数据，请添加</view>
	<!-- 底部 -->
	<view style="300rpx"></view>
	<view class="newly-added-view">
		<view class="newly-added" @click="toggle('bottom')">新增横幅</view>
	</view>
	<!-- 弹窗 -->
	<uni-popup ref="inputDialog" background-color="#fff" @change="change">
		<view class="popup-content">
			<view class="space-view">
				<view class="modify-sub modify-padding">
					<image src="/static/detail/guanbi.svg" mode="widthFix" @click="gb"></image>
					<text>新增横幅</text>
					<text class="sort-but" @click="subMit">提交</text>
				</view>
				<view class="upload-cover">
					<image src="/static/detail/miaosha-img.jpg" mode="aspectFill" v-if="data.banner_cover == ''"  @click="uploadImg"></image>
					<image :src="data.banner_cover" mode="aspectFill" @click="previewImg"></image>
					<image src="../../static/detail/shanchu-goods.svg" @click="data.banner_cover=''" v-if="data.banner_cover != ''" mode="widthFix"></image>
				</view>
				<view class="relation relation-back" @click="toGoodsList">
					<text>关联商品</text>
					<text class="over-text">{{data.goods.title=='' ? '添加' : data.goods.title}}</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {ref,reactive,watch,onMounted} from 'vue'
	import {uploadImage,cloud,previewPicture} from '@/Acc-config/media.js'
	import {select_goods} from '@/Acc-config/answer.js'
	import {init} from '@/Acc-config/init.js'
	
	let inputDialog= ref(null)
	
	// 打开弹窗的方法
	function toggle(type) {
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		inputDialog.value.open(type)
	}
	
	/* function change(type){
		if(type.show==false){
			
		}
	} */
	
	// 关闭弹窗
	function gb(){
		data.goods.title=''
		data.banner_cover=''
		inputDialog.value.close()
	}
	
	// 跳转到选择商品页面
	function toGoodsList(){
		let goods_id=data.banner_data.map(item=>item.goods_id)
		uni.navigateTo({
			url:`/pages/goods-list/goodsList?goods_id=${JSON.stringify(goods_id)}`
		})
	}
	
	const data=reactive({
		banner_cover:'',//横幅图片
		banner_data:[],//横幅数据
		goods:{
			title:'',//商品标题
			goods_id:'',//商品id
			video_url:''//商品短视频链接
		}//关联的商品数据
	})
	
	onMounted(()=>{
		getBanner()
	})
	
	// 从数据库中查询出横幅图片的数据
	async function getBanner(){
		let db=await init()
		let result =await db.database().collection('banner').get()
		data.banner_data=result.data
	}
	
	// 上传横幅图片
	async function uploadImg(){
		try{
			// 上传到本地-拿到返回的URL链接
			const upImg=await uploadImage()
			uni.showLoading({title:'正在上传',mask:true})
			// 将图片的URL链接上传到云存储
			const res=await cloud(upImg[0].tempFilePath)
			data.banner_cover=res
			
			uni.hideLoading()
			uni.$showMsg('图片上传成功','succeed')
		}catch(e){
			//TODO handle the exception
			console.log(e)
			// uni.$showMsg('图片上传失败')
		}
		
		
	}
	
	// 预览上传的横幅图片
	function previewImg(){
		previewPicture(data.banner_cover,[data.banner_cover])
	}
	
	// 监听关联/选中的商品
	watch(select_goods,(newValue)=>{
		data.goods.title=newValue.goods_title
		data.goods.goods_id=newValue.goods_id
		data.goods.video_url=newValue.video_url
	})
	
	
	// 提交-校验数据
	function subMit(){
		switch(true){
			case data.banner_cover=='' : uni.$showMsg('请上传封面图')
			break;
			case data.goods.title=='' : uni.$showMsg('请选择关联的商品','none')
			break;
			default:database()
		}
	}
	
	// 将横幅图片&选择的商品上传到数据库
	async function database(){
		// 提交给数据库的数据
		let obj={
			banner_cover:data.banner_cover,
			goods_id:data.goods.goods_id,
			video_url:data.goods.video_url
		}
		
		const DB=await init()
		try{
			uni.showLoading({
				title:'正在提交',
				mask:true
			})
			await DB.database().collection('banner').add({data:obj})
			uni.hideLoading()
			uni.$showMsg('提交成功','succeed')
			getBanner()
			gb()//关闭弹窗
			
		}catch(e){
			//TODO handle the exception
			uni.$showMsg('提交失败')
			console.log(e)
		}
	}
	
	// 删除
	async function deleteBanner(id,index){
		
		try{
			const DB=await init()
			await DB.database().collection('banner').doc(id).remove()
			data.banner_data.splice(index,1)
			uni.$showMsg('删除成功','none')
		}catch(e){
			//TODO handle the exception
			console.log(e) 
			uni.$showMsg('删除失败','none')
		}
	}
	
	
	
	
	
</script>

<style scoped>
.space-view{
	height: 800rpx;
}
.modify-padding{
	padding-bottom: 60rpx !important;
}
.modify-padding image{
	margin-right: 60rpx;
}
.upload-cover{
	position: relative;
}
.upload-cover image:nth-child(1){
	width: 100%;
	height: 380rpx;
	display: block;
}
.upload-cover image:nth-child(2){
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	top: 6rpx;
	right: 6rpx;
}
.relation-back{
	background-color: #f7f7f7 !important;
	color: #000000 !important;
}
.over-text{
	color: #ed6b51 !important;
}
</style>